<template>
  <div class="operation-container">
    <a-row :gutter="20" class="mb-20">
      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-header">
            <div class="stat-icon bg-primary">
              <ShopOutlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">今日新增商户</div>
              <div class="stat-number">12</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-header">
            <div class="stat-icon bg-success">
              <BoxPlotOutlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">今日新增产品</div>
              <div class="stat-number">36</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-header">
            <div class="stat-icon bg-warning">
              <UserOutlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">今日新增客户</div>
              <div class="stat-number">89</div>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card class="stat-card">
          <div class="stat-header">
            <div class="stat-icon bg-danger">
              <OrderedListOutlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">今日订单总额</div>
              <div class="stat-number">¥256,800</div>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="20" class="mb-20">
      <a-col :span="12">
        <a-card class="chart-card">
          <template #title>
            <span>近7日订单趋势</span>
          </template>
          <div class="chart-container">
            <div ref="orderTrendChart" style="height: 300px;"></div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="chart-card">
          <template #title>
            <span>商户分布</span>
          </template>
          <div class="chart-container">
            <div ref="merchantDistributionChart" style="height: 300px;"></div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="20" class="mb-20">
      <a-col :span="12">
        <a-card class="chart-card">
          <template #title>
            <span>热销产品TOP5</span>
          </template>
          <div class="chart-container">
            <div ref="hotProductsChart" style="height: 300px;"></div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="chart-card">
          <template #title>
            <span>客户增长趋势</span>
          </template>
          <div class="chart-container">
            <div ref="customerGrowthChart" style="height: 300px;"></div>
          </div>
        </a-card>
      </a-col>
    </a-row>

    <a-row :gutter="20">
      <a-col :span="24">
        <a-card class="table-card">
          <template #title>
            <span>异常订单监控</span>
          </template>
          <a-table :data-source="abnormalOrders" :columns="abnormalOrderColumns" :pagination="false">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'action'">
                <div class="smart-table-operate">
                  <a-button type="link" @click="handleViewDetail(record)">查看详情</a-button>
                </div>
              </template>
            </template>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { message } from 'ant-design-vue';
import { ShopOutlined, BoxPlotOutlined, UserOutlined, OrderedListOutlined } from '@ant-design/icons-vue';

export default {
  name: 'OperationDashboard',
  components: {
    ShopOutlined,
    BoxPlotOutlined,
    UserOutlined,
    OrderedListOutlined
  },
  data() {
    return {
      abnormalOrders: [
        { id: 'ORD20230901001', merchant: '商户A', product: '产品X', customer: '客户甲', amount: '¥1,200', reason: '支付超时', time: '2023-09-01 10:30:00' },
        { id: 'ORD20230901002', merchant: '商户B', product: '产品Y', customer: '客户乙', amount: '¥800', reason: '库存不足', time: '2023-09-01 11:15:00' },
        { id: 'ORD20230901003', merchant: '商户C', product: '产品Z', customer: '客户丙', amount: '¥2,500', reason: '地址错误', time: '2023-09-01 12:45:00' },
        { id: 'ORD20230901004', merchant: '商户A', product: '产品X', customer: '客户丁', amount: '¥1,600', reason: '客户投诉', time: '2023-09-01 14:20:00' },
        { id: 'ORD20230901005', merchant: '商户D', product: '产品Y', customer: '客户戊', amount: '¥950', reason: '退款申请', time: '2023-09-01 15:30:00' }
      ],
      abnormalOrderColumns: [
        {
          title: '订单号',
          dataIndex: 'id',
          key: 'id',
          width: 180
        },
        {
          title: '商户',
          dataIndex: 'merchant',
          key: 'merchant',
          width: 180
        },
        {
          title: '产品',
          dataIndex: 'product',
          key: 'product',
          width: 180
        },
        {
          title: '客户',
          dataIndex: 'customer',
          key: 'customer',
          width: 180
        },
        {
          title: '金额',
          dataIndex: 'amount',
          key: 'amount',
          width: 120
        },
        {
          title: '异常原因',
          dataIndex: 'reason',
          key: 'reason',
          width: 200
        },
        {
          title: '发生时间',
          dataIndex: 'time',
          key: 'time',
          width: 180
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          width: 150
        }
      ]
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // 模拟图表初始化
      console.log('初始化运营图表...')
    },
    handleViewDetail(record) {
      message.info(`查看订单${record.id}的详细信息`)
    }
  }
}
</script>

<style scoped>
.operation-container {
  padding: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.stat-header {
  display: flex;
  align-items: center;
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-right: 15px;
}

.bg-primary {
  background-color: #1890ff;
}

.bg-success {
  background-color: #52c41a;
}

.bg-warning {
  background-color: #faad14;
}

.bg-danger {
  background-color: #f5222d;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.chart-card,
.table-card {
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>